<template>
    <div class="bed-use">
        <div class="hd">
            <h3>床位使用情况</h3>
            <!-- 引入日期选择器 -->
            <Time></Time>
        </div>
        <div class="content">
            <ul>
                <li>
                    <p>全院总床位</p>
                    <div class="num">
                        <strong>510</strong>张
                    </div>
                    <span>查看详情</span>
                </li>
                <li>
                    <p>已使用床位数</p>
                    <div class="num">
                        <strong>300</strong>张
                    </div>
                </li>
                <li>
                    <p>未使用床位数</p>
                    <div class="num">
                        <strong>200</strong>张
                    </div>
                </li>
                <li>
                    <p>新增床位数</p>
                    <div class="num">
                        <strong>0</strong>张
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import Time from "./Time.vue"
export default {
    components: {
        Time
    }
}
</script>

<style lang="scss" scoped>
.bed-use {
    background-color: #fff;
    .hd {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 20px;
        height: 50px;
        border-bottom: 1px solid rgba(242, 242, 242, 1);
        h3 {
            font-weight: 400;
        }
    }
    .content {
        padding: 20px;
        ul {
            padding: 30px;
            display: flex;
            li {
                width: 200px;
                color: #AAAAAA;
                line-height: 18px;
                p {
                    margin-bottom: 20px;
                    font-size: 14px;
                }
                .num {
                    margin-bottom: 20px;
                }
                strong {
                    font-size: 32px;
                    font-weight: normal;
                    margin-right: 5px;
                }
            }
            li:not(:first-child) {
                padding-left: 80px;
                border-left: 1px solid rgba(242, 242, 242, 1);
            }
            li:first-child {
                strong, span {
                    color: #0468FF;
                }
            }
            li:nth-child(2) {
                strong {
                    color: #FA6A1C;
                }
            }
            li:nth-child(3) {
                strong {
                    color: #00A76F;
                }
            }
            li:nth-child(4) {
                strong {
                    color: #7F7F7F;
                }
            }
        }

    }
}
</style>